<!--
 * @description: 
 * @Author: FengKongLi
 * @Date: 2022-07-20 17:47:57
 * @LastEditors: FengKongLi
 * @LastEditTime: 2022-09-13 14:37:00
-->
<template>
  <div class="home">
    <div id="cesiumContainer"></div>
    <div class="list list-1">
      <ul>
        <li @click="addPoint">添加点</li>
        <li @click="setsetView">相机系统setView方法</li>
        <li @click="setflyTo">相机系统flyTo方法</li>
        <li @click="setlookAt">相机系统lookAt方法</li>
        <li @click="addEarthatNight">添加夜晚的地球</li>
        <li @click="addTerrain">添加地形</li>
      </ul>
    </div>
    <div @mouseover="add" class="add">添加高德地图</div>
    <div class="list list-2">
      <ul v-show="isShow">
        <li @click="addGaode('路网注记图')">路网注记图</li>
        <li @click="addGaode('矢量图')">矢量图</li>
        <li @click="addGaode('影像图')">影像图</li>
        <li @click="addGaode('道路纯图')">道路纯图</li>
        <li @click="addGaode('道路简图')">道路简图</li>
        <li @click="addGaode('道路详图')">道路详图</li>
        <li @click="addGaode('纯道路图')">纯道路图</li>
        <li @click="addGaode('纯地标图')">纯地标图</li>
        <li @click="clearAllLayers">清除图层</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      viewer: "",
      // 新添加的图层
      layers: "",
      url: "",
      isShow: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3NTRlZTllYi0zMjQ3LTRjYzItOGViOS1kYmVjNjAyOTA5ODEiLCJpZCI6OTk0NTAsImlhdCI6MTY1NjQ5NTE4Nn0.BeOLKnxflcj0ztuG4RYdvR8xbXGV7cfEZQWq8Hu7Epw";
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否显示动画控件
        timeline: false, //是否显示时间线控件
        // fullscreenButton: false, //全屏按钮
        // sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        shouldAnimate: true,
        // infoBox: true,
      });
      //   去掉版权信息
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      // 控制球体是否显示
      this.viewer.scene.globe.show = true;
      // 这两个是相等的
      // console.log(this.viewer.imageryLayers == this.viewer.scene.imageryLayers);
    },
    addPoint() {
      // 添加点
      const entity = this.viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400),
        point: {
          pixelSize: 100,
          color: new Cesium.Color(0, 1, 0, 1),
        },
      });
      // 定位到实体
      // this.viewer.trackedEntity = entity;
      this.viewer.flyTo(entity);
    },
    setsetView() {
      const position = Cesium.Cartesian3.fromDegrees(116.39, 39.91, 400);
      this.viewer.camera.setView({
        // 目的地
        destination: position,
        // 方向
        orientation: {
          heading: Cesium.Math.toRadians(90.0),
          pitch: Cesium.Math.toRadians(-90),
          roll: 0.0,
        },
      });
    },
    setflyTo() {
      console.log("flyto");
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0),
      });
    },
    // setlookAt方法会锁定目标位置，会围绕目标点做旋转，而不会改变其位置
    setlookAt() {
      console.log("setlookAt");
      const center = Cesium.Cartesian3.fromDegrees(116.39, 39.91);
      // 设置一个水平旋转视口方向的角度
      const heading = Cesium.Math.toRadians(90.0);
      // 设置一个垂直旋转视口的角度
      const pitch = Cesium.Math.toRadians(-90);
      // 设置相机距离目标的高度
      const range = 2500;
      this.viewer.camera.lookAt(
        center,
        new Cesium.HeadingPitchRange(heading, pitch, range)
      );
    },
    addEarthatNight() {
      const layer = this.viewer.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
      );
    },
    addTerrain() {
      console.log("addTerrain");
      this.viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1),
        // 增加水面特效
        requestWaterMask: true,
        // 增加法线，用于提高光照效果
        requestVertexNormals: true,
      });
    },
    add() {
      this.isShow = !this.isShow;
    },
    // 添加高德地图
    addGaode(type) {
      switch (type) {
        case "路网注记图":
          this.url =
            "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
          break;
        case "矢量图":
          this.url =
            "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}";
          break;
        case "影像图":
          this.url =
            "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}";
          break;
        case "道路纯图":
          this.url =
            "https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}&scl=1&ltype=2";
          break;
        case "道路简图":
          this.url =
            "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&size=1&scale=1&style=7";
          break;
        case "道路详图":
          this.url =
            "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";
          break;
        case "纯道路图":
          this.url =
            "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=8&ltype=11";
          break;
        case "纯地标图":
          this.url =
            "https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}&scl=1&ltype=4";
          break;

        default:
          break;
      }
      // 添加高德路网中文注记图
      this.atLayer = new Cesium.UrlTemplateImageryProvider({
        url: this.url,
        minimumLevel: 3,
        maximumLevel: 18,
      });
      this.layers = this.viewer.imageryLayers.addImageryProvider(this.atLayer);
    },
    clearAllLayers() {
      this.viewer.imageryLayers.removeAll(false);
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  #cesiumContainer {
    width: 100%;
    height: 90vh;
    margin: 0;
    padding: 0px;
    overflow: hidden;
  }
  .list {
    position: absolute;
    background-color: rgb(222, 218, 212);
    ul {
      color: rgb(248, 240, 92);
      li {
        background: rgb(144, 213, 248);
        margin: 0.3rem;
        padding: 0.5rem;
      }
    }
  }
  .add {
    position: absolute;
    top: 40%;
    background-color: rgb(222, 218, 212);
    padding: 1rem;
    border-radius: 1rem;
  }
  .list-1 {
    top: 1rem;
  }
  .list-2 {
    bottom: 1rem;
  }
}
</style>
